<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" align="left" :inline="true">
                <el-form-item label="用户编号" prop="uid">
                    <el-input class="w-[280px]" clearable v-model="queryParams.uid" />
                </el-form-item>
                <el-form-item label="订单编号" prop="out_no">
                    <el-input class="w-[280px]" clearable v-model="queryParams.out_no" />
                </el-form-item>
                <el-form-item label="投放账号" prop="account_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.account_id" />
                </el-form-item>
                <el-form-item label="外推编号" prop="source_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.source_id" />
                </el-form-item>
                <el-form-item label="短剧编号" prop="drama_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.drama_id" />
                </el-form-item>

                <el-form-item label="充值类型" prop="type">
                    <el-select
                        v-model="queryParams.type"
                        class="w-[280px]"
                        clearable
                    >
                        <el-option label="全部" value="-1" />
                        <el-option label="普通充值" value="1" />
                        <el-option label="会员充值" value="2" />
                        <el-option label="充值活动" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态" prop="is_pay">
                    <el-select
                        v-model="queryParams.is_pay"
                        class="w-[280px]"
                        clearable
                    >
                        <el-option label="全部" value="-1" />
                        <el-option label="未支付" value="0" />
                        <el-option label="已支付" value="1" />
                    </el-select>
                </el-form-item>

                <el-form-item label="回传状态" prop="callback_status">
                    <el-select
                        v-model="queryParams.callback_status"
                        class="w-[280px]"
                        clearable
                    >
                        <el-option label="全部" value="-1" />
                        <el-option label="未回传" value="0" />
                        <el-option label="已回传" value="1" />
                    </el-select>
                </el-form-item>

                <el-form-item label="广告项目" prop="project_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.project_id" />
                </el-form-item>

                <el-form-item label="广告计划" prop="promotion_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.promotion_id" />
                </el-form-item>

                <el-form-item label="创建时间">
                    <daterange-picker
                        class="w-[280px]"
                        v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-card class="!border-none mt-4" shadow="never">
            <el-row :gutter="16">
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#409EFF;font-size:16px" title="已支付金额" :value="statisticData.money_pay || 0" />
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#67C23A;font-size:16px" title="预提单总金额" :value="statisticData.money_total || 0" />
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#E6A23C;font-size:16px" title="订单成功数量" :value="statisticData.order_pay || 0"/>
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#606266;font-size:16px"  title="预提单数量" :value="statisticData.order_total || 0"/>
                </el-col>
                <el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
                    <el-statistic value-style="color:#F56C6C;font-size:16px" title="已回传总数" :value="statisticData.callback_num || 0"/>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never">

            <el-table
                class="mt-4"
                size="mini"
                v-loading="pager.loading"
                :data="pager.lists"
            >
                <el-table-column label="订单编号"  prop="out_no" min-width="146" />
                <el-table-column label="创建时间" prop="create_time" min-width="100" />
                <el-table-column label="用户编号" prop="uid" min-width="100" />
                <el-table-column label="用户注册时间"  prop="user_create_time" min-width="120" />

                <el-table-column label="投放账号" prop="account_id" min-width="120"/>
<!--                <el-table-column label="外推编号"  prop="source_id" min-width="100" />-->

                <el-table-column label="短剧编号" prop="drama_id" min-width="100" />

                <el-table-column label="支付金额"  prop="money" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#F56C6C;font-size:16px" :value="row.money" />
                    </template>
                </el-table-column>

                <el-table-column label="支付状态" prop="is_pay" min-width="100">
                    <template #default="{ row }">
                        <el-tag effect="dark" type="danger" v-if="row.is_pay == 0">未支付</el-tag>
                        <el-tag effect="dark" type="success" v-if="row.is_pay == 1">已支付</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="回传状态" prop="callback_status" min-width="100">
                    <template #default="{ row }">
                        <el-tag type="info" v-if="row.callback_status == 0">未回传</el-tag>
                        <el-tag type="success" v-if="row.callback_status == 1">已回传</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="100" />

                <el-table-column label="项目信息" prop="project_id" min-width="185">
                    <template #default="{ row }">
                        <el-row :gutter="24">
                            <span>项目id:{{ row.project_id}}</span>
                        </el-row>
                        <el-row :gutter="24">
                            <span>项目名称:{{ row.project_name}}</span>
                        </el-row>
                    </template>
                </el-table-column>

                <el-table-column label="计划信息" prop="promotion_id" min-width="185">
                    <template #default="{ row }">
                        <el-row :gutter="24">
                            <span>计划id:{{ row.promotion_id}}</span>
                        </el-row>
                        <el-row :gutter="24">
                            <span>计划名称:{{ row.promotion_name}}</span>
                        </el-row>
                    </template>
                </el-table-column>


                <el-table-column label="操作" width="145" fixed="right">
                    <template #default="{ row }">
                        <el-row :gutter="24">
                            <el-col :span="11">
                                <el-button v-perms="['client:recharge_report:list']" type="primary" link>
                                    <router-link :to="{
                                            path: getRoutePath('client:recharge_report:list'),
                                            query: {
                                                account_id: row.account_id,
                                            }
                                        }">
                                        每日报表
                                    </router-link>
                                </el-button>
                            </el-col>

                            <el-col :span="11">
                                <el-button v-perms="['client:client_user:list']" type="warning" link>
                                    <router-link :to="{
                                            path: getRoutePath('client:client_user:list'),
                                            query: {
                                                uid: row.uid,
                                            }
                                        }">
                                        用户管理
                                    </router-link>
                                </el-button>
                            </el-col>

                        </el-row>

                        <el-row :gutter="24">

                            <el-col :span="11">
                                <el-button
                                    v-if="row.callback_status == 0 && row.is_pay == 1"
                                    v-perms="['client:orders:call_back']"
                                    type="danger"
                                    link
                                    @click="handleCallBack(row.id)"
                                >
                                    回传
                                </el-button>
                            </el-col>
                        </el-row>

                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="orders">
import { ordersCallBack, ordersLists, ordersStatistic, orderAdData, orderAdData2 } from '@/api/client/orders'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { format } from 'date-fns'
import { getRoutePath } from '@/router'
import { ref } from 'vue'
const { query } = useRoute()
const today = format(new Date(), 'yyyy-MM-dd')

const queryParams = reactive({
    'uid': '',
    'type': '-1',
    'out_no': '',
    'is_pay': '-1',
    'drama_id': '',
    'account_id': String(query?.account_id || ""),
    'source_id': '',
    'callback_status': '-1',
    'start_time': today,
    'end_time': today,
    'project_id': '',
    'promotion_id': '',
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: ordersLists,
    params: queryParams
})


// 手动管理统计数据
const statisticData = ref({
    money_pay: 0,
    money_total: 0,
    order_pay: 0,
    order_total: 0,
    callback_num: 0,
})

// 获取统计数据
const fetchStatistic = async () => {
    try {
        const response = await ordersStatistic(queryParams)
        statisticData.value = response || { money_pay: 0, money_total: 0, order_pay: 0, order_total: 0, callback_num: 0 }
    } catch (error) {
        console.error('获取统计数据失败:', error)
        statisticData.value = { money_pay: 0, money_total: 0, order_pay: 0, order_total: 0, callback_num: 0 }
    }
}

// 广告数据
const adData = ref([{
    label: '',
    value: ''
}])

// 获取统计数据
const fetchAdData = async (params?: Record<string, any>) => {
    try {
        const response = await orderAdData(params)
        adData.value = response.lists || []
    } catch (error) {
        console.error('获取统计数据失败1:', error)
        adData.value = []
    }
}

// 广告数据
const adData2 = ref([{
    label: '',
    value: ''
}])

// 获取统计数据
const fetchAdData2 = async (params?: Record<string, any>) => {
    try {
        const response = await orderAdData2(params)
        adData2.value = response.lists || []
    } catch (error) {
        console.error('获取统计数据失败2:', error)
        adData2.value = []
    }
}


// 统一的查询函数
const handleQuery = async () => {
    await Promise.all([
        getLists(),
        fetchStatistic(),
    ])
}

// 重置函数
const handleReset = () => {
    resetParams()
    handleQuery()
}

// 更新模板中的按钮事件
const handleSearch = () => {
    resetPage()
    handleQuery()
}

const handleCallBack = async (id: number) => {
    await feedback.confirm('确定要回传吗？')
    await ordersCallBack({ id })
    feedback.msgSuccess('成功')
    handleQuery()
}
const router = useRouter()
const handleAccountClick = (accountId: string) => {
    router.push({
        path: getRoutePath('client:recharge_report:list'),
        query: {
            account_id: accountId
        }
    })
}

// 初始化
onMounted(() => {
    handleQuery()
    fetchAdData({type: "project_id"})
    fetchAdData2({type: "promotion_id"})
})
</script>
